<template>
  <div class="UUpload">
    <el-upload
      ref="UUpload"
      v-bind="$attrs"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :before-upload="beforeUpload"
      :on-exceed="onExceed"
      :on-success="onSuccess"
      :on-error="onError"
      :file-list="fileList"
    >
      <!-- <el-button type="primary">上传</el-button> -->

      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        >
        <span class="el-upload-list__item-actions">
          <!-- <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span> -->
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'UUpload',
  props: {
    formValue: {
      type: [Array, String, Object],
      default: () => []
    }
  },
  data() {
    return {
      disabled: false,
      fileList: []
    };
  },
  methods: {
    // 点击已上传文件触发
    onPreview(file) {

    },
    // 移除列表文件触发
    onRemove(file, fileList) {
      console.log('remove', file, fileList);
      this.$attrs.remove && this.$attrs.remove(file);
    },
    // 上传前触发函数，返回false可以终止上传
    beforeUpload(file) {
      console.log('beforeUpload', file, this.$attrs);
    },
    // 文件数量超过限制函数
    onExceed() {
      // return alert('文件超出数量限制!');
      return this.$message.error('文件超出数量限制!');
    },
    // 上传成功
    onSuccess(response, file, fileList) {
      // console.log('success', file, response);
      console.log(fileList);
      if (response.resp_code != 0) {
        const index = fileList.findIndex(item => item.uid == file.uid);
        fileList.splice(index, 1);
        // alert('上传失败:' + response.resp_msg);
        this.$message.error('上传失败：' + response.resp_msg);
        return false;
      }

      const data = {
        id: response.datas.id,
        fileId: response.datas.fileId,
        fileName: response.datas.fileName,
        filePath: response.datas.filePath
      };
      // 是否多文件上传
      if (this.$attrs.multiple) {
        this.$emit('update:formValue', [...this.formValue, data]);
        // values[config.name].push(response.data);
      } else {
        this.$emit('update:formValue', data);
        // values[config.name] = response.data;
      }
      // config.success && config.success(val);
      this.$attrs.success && this.$attrs.success(response);
    },
    // 上传失败
    onError(err) {
      console.log('err', err);
      return this.$message.error('文件上传失败!');
      // return alert('文件上传失败!');
    },
    // 删除图片
    handleRemove(file) {
      console.log(file);
      const uploadFiles = this.$refs['UUpload'].uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] == file.url) {
          uploadFiles.splice(i, 1);
        }
      }

      if (this.$attrs.multiple) {
        const index = this.formValue.findIndex(item => item.fileId == file.response.datas.fileId);
        this.formValue.splice(index, 1);
      } else {
        this.$emit('update:formValue', null);
      }

      console.log(this.formValue);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {
    setTimeout(() => {
      if (this.formValue instanceof Array && this.formValue.length > 0) {
        this.fileList = this.formValue;
      }
    }, 2000);
    console.log('upload', this.formValue);
  }
};
</script>

<style lang="scss" scoped></style>